<template>
  <div class="cascade-tree-demo-wrapper">
    <div class="component-example">
      <label class="example-title">使用示例</label>
      <div class="example">
        <cascade-tree :cascadeTreeData="cascadeTreeData" @cascade-tree-change="cascadeTreeChange"></cascade-tree>
      </div>
    </div>
    <div class="component-document">
      <div class="import-property">
        <label class="prop-title">输入属性</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in cascadeTreeProps" :key="index">
            <div class="prop-desc">
              <span> {{item.desc}}</span>
              <div class="sub-element-lists" v-if="item.lists && item.lists.length !== 0">
                <ul class="sub-lists">
                  <li class="sub-item" v-for="(op,i) in item.lists" :key="i">
                    <label class="sub-prop-name">{{op.name}}：</label>
                    <span class="sub-prop-value">{{op.desc}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
        <label class="prop-title">输出方法</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in cascadeTreeMethods" :key="index">
            <div class="prop-desc">
              <span> {{item.desc}}</span>
              <div class="sub-element-lists" v-if="item.lists && item.lists.length !== 0">
                <ul class="sub-lists">
                  <li class="sub-item" v-for="(op,i) in item.lists" :key="i">
                    <label class="sub-prop-name">{{op.name}}：</label>
                    <span class="sub-prop-value">{{op.desc}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  // import CascadeTree from "../../components/diy-components/CascadeTree/CascadeTree";
  export default {
    name: 'CascadeTreeDemo',
    // components: {CascadeTree},
    data() {
      return {
        urls:{
          getCascadeData:"./static/json/cascade-tree-data.json"
        },
        cascadeTreeData:{},
        cascadeTreeProps: [
          {
            lists: [
              {name: 'cascadeTreeData', desc: 'Object，级联名称和下拉列表里数据'}
            ]
          }
        ],
        cascadeTreeMethods: [
          {
            lists: [
              {name: 'cascade-tree-change', desc: '选择完成，点击确认后触发此方法，只返回一个参数，参数的option中有一个checkedNodes属性存放的事当前项中选中的数据。'}
            ]
          }
        ],
      }
    },
    methods: {
      //接收到返回的数据
      cascadeTreeChange(e){
        // console.log("返回数据",e);
      },
      //获取到的数据，后期会改成组件传参数
      getCascadeData(){
        this.httpRequest('get', `${this.urls.getCascadeData}`, {}, {
          fullSuccess: true
        }).then(res => {
          this.cascadeTreeData = res.value;
          // console.log("级联树数据",res.value);
        })
      },
    },
    mounted() {
      this.getCascadeData();
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../../assets/styles/base_style";
  .cascade-tree-demo-wrapper{
    width: 100%;
    height: 500px;
  }
</style>
